<template>
  <el-row>
    <!-- 菜单部分，宽度设置为4列 -->
    <el-col :span="4" class="menu-column">
      <el-menu

      class="el-menu-vertical-demo"
      @select="handleSelect"
      router
      :default-openeds="['1']"
      >
      <!-- 第一项子菜单 -->
        <el-menu-item index="/about" to="/about">
          <el-icon><IconMenu /></el-icon>
          <span>threeJs说明与学习</span>
        </el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>ThreeJs实践</span>
        </template>

<!--          <el-menu-item index="/about" to="/about">about</el-menu-item>-->
          <el-menu-item index="/demo1" to="/demo1">Demo1</el-menu-item>
        <el-menu-item index="/demo2" to="/demo1">Demo2</el-menu-item>
        <el-menu-item index="/demo3" to="/demo1">Demo3</el-menu-item>
        <el-menu-item index="/demo4" to="/demo1">Demo4</el-menu-item>
        <el-menu-item index="/demo5" to="/demo1">Demo5</el-menu-item>

      </el-sub-menu>

      <!-- 其他菜单项 -->


<!--      <el-menu-item index="3" disabled>-->
<!--        <el-icon><Document /></el-icon>-->
<!--        <span>Navigator Three</span>-->
<!--      </el-menu-item>-->

      <el-menu-item index="4" to="/settings">
        <el-icon><Setting /></el-icon>
        <span>相关</span>
      </el-menu-item>
      </el-menu>
    </el-col>

    <!-- 路由展示区域，宽度设置为剩余部分 -->
    <el-col :span="20">
      <router-view></router-view> <!-- 路由内容渲染区域 -->
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue';

const handleSelect = (index: string) => {
  console.log(`Selected menu item: ${index}`);
};
</script>

<style scoped>
.menu-column {
  background-color: #f4f4f4;
  padding: 20px;
  height: 100vh; /* 高度填满屏幕 */
  position: fixed; /* 使菜单固定在左侧 */
  left: 0;
  top: 0;
  bottom: 0;
}
</style>
